<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* html,body{
            width: 100%;
            height: 100%;
        } */
        .container{
            /* width: 100%; */
            width: 100vw;
            /* height: 100%; */
            height: 100vh;
            background: url(./bg.png) no-repeat;
            background-size: cover;
        }
        .container .areaUsedToShowData{
            position: fixed;
            left: 50%;
            top: 50%;
            /* 使用上面的↑三个属性来把元素的左上角的位置调整到设备屏幕的中心点 */
            width: 1920px;
            height: 1080px;
            background-color: orange;
            transform: scale(1.2);
            /* 把缩放时的基点（即参考点）从元素的几何中心调整到元素的左上角↓ */
            transform-origin: left top;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            margin-left: 50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-left: 50px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="areaUsedToShowData">
            <div class="box1">示例文字1</div>
            <div class="box2">示例文字2</div>
        </div>
    </div>
    <script>
        // 使用js代码来控制数据大屏模块内容显示区域的大小
        let areaUsedToShowData = document.querySelector('.areaUsedToShowData');
        // 把元素的左上角从屏幕的中心点移动到左上角（即其原来的所在位置）↓
        areaUsedToShowData.style.transform = `scale(${aFunctionUsedToCalculateTheScalingRatio()}) translate(-50%, -50%)`
        // 计算缩放的比例↓
        function aFunctionUsedToCalculateTheScalingRatio(width=1920, height=1080) {
            const TheWidthAfterScaleing = window.innerWidth/width; // 缩放后的宽度
            const TheHeightAfterScaleing = window.innerHeight/height; // 缩放后的高度
            if (TheWidthAfterScaleing < TheHeightAfterScaleing) {
                return TheWidthAfterScaleing; // 返回缩放比例
            } else {
                return TheHeightAfterScaleing;
            }
        }
        // 注：方法“window.onresize”会在窗口大小发生变化时触发↓
        window.onresize = function() {
            console.log('窗口大小发生了变化')
            areaUsedToShowData.style.transform = `scale(${aFunctionUsedToCalculateTheScalingRatio()}) translate(-50%, -50%)`
        }
    </script>
</body>
</html>